<style>
    .wishimage {
        float: left;
        width: 300px;
        height: 300px
    }
</style>
<div class="main-view">
    <br>

    <div class="left-margin top-margin"><strong class="am-text-primary am-text-lg">心愿管理</strong></div>

    <form class="am-form-inline left-margin top-margin" role="form">

        <div class="am-modal am-modal-loading am-modal-no-btn" id="modal-loading">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">正在载入...</div>
                <div class="am-modal-bd">
                    <span class="am-icon-spinner am-icon-spin"></span>
                </div>
            </div>
        </div>

        <div class="top-margin">
            <label class="left-margin">愿望关键字:</label>
            <input type="text" class="form-control" placeholder="" style="margin-left:0;width: 20%"
                   ng-model="opt.desc">
            <br/>
            <label class="left-margin">Page:</label>
            <input type="number" name="currentPage" min="1" ng-model="currentPage" ng-change="search()">

            <label class="left-margin">Size per page:</label>
            <input type="number" name="pageSize" min="1" ng-model="pageSize"><br/>
        </div>

        <button id="search-target" data-am-modal="{target: '#modal-loading'}" type="submit"
                class="am-btn am-btn-primary left-margin" ng-click="search()">搜索
        </button>
    </form>

    <div class="am-btn-group am-btn-group-xs left-margin top-margin">
        <button type="button" class="am-btn am-btn-default" ng-click="triggerWishEdit()"><span
                class="am-icon-plus"></span>添加愿望
        </button>
        <button type="button" class="am-btn am-btn-default" ng-click="delete()"
                ng-confirm-click="删除{{checkedWishes.length}}个数据: {{checkedWishes}}。确定?"><span
                class="am-icon-trash-o"></span> 删除
        </button>
    </div>

    <div class='left-margin'>
        共<span>{{totalData}}条数据</span>. Page {{currentPage}}
    </div>

    <div class="pagination-table left-margin" id="tab_menu" style="margin-top: 0;">
        <table class="am-table am-table-striped am-table-hover table-main">
            <thead>
            <tr>
                <th class="table-check"><input type="checkbox" ng-click="checkAllWishes()"
                                               ng-checked="checkedWishes.length == wishList.length"></th>
                <th class="table-title">#</th>
                <th class="table-title">id</th>
                <th class="table-title">愿望</th>
                <th class="table-title">条件</th>
                <th class="table-title">加权</th>
                <th class="table-title">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(index,wish) in wishList" id="{{wish.objId}}">
                <td class="table-check"><input type="checkbox" class="item-check"
                                               ng-checked="checkedWishes.indexOf(wish.objId) > -1"
                                               ng-click="checkWish(wish.objId)"></td>
                <td>{{(currentPage-1)*pageSize + index+1}}</td>
                <td>{{wish.objId}}</td>
                <td>{{wish.desc}}</td>
                <td><i style="color:red">{{wish.maxDays}}</i>天收集到<i
                        style="color:red">{{wish.minSupport}}</i>个支持
                </td>
                <td>{{wish.weight}}</td>
                <td>
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                    ng-click="triggerWishEdit(wish)"><span class="am-icon-copy"></span> 编辑
                            </button>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!--新增/编辑框 -->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-edit" style="width:60%;height:90%">
        <div class="am-modal-dialog">
            <div class="am-modal-hd border-bottom" style="text-align: left;">
                <span id="modal-edit-title">新增愿望</span>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div style="position:absolute; left:9%; right:10%;">
                <div class="am-modal-bd body-area text-left">
                    <form ng-submit="submitWish(wishModel)">
                        <label class="control-label">愿望描述:</label>
                        <input type="text" class="modal-input" style="width:400px;display:inline-block"
                               ng-model="wishModel.desc" required><br/>

                        <label class="control-label">天:</label>
                        <input type="number" name="maxDays" min="1" ng-model="wishModel.maxDays" required><br/>

                        <label class="control-label">支持人数:</label>
                        <input type="number" name="minSupport" min="1" ng-model="wishModel.minSupport" required><br/>

                        <label class="control-label">加权:</label>
                        <input type="number" name="weight" min="0" step="0.01" ng-model="wishModel.weight"><br/>

                        <label class="control-label">心愿图片(最多3个)</label>

                        <div>
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <tbody>
                                <tr ng-repeat="(index,image) in wishModel.images">
                                    <td>
                                        <label class="control-label">图片{{index+1}}</label>
                                        <img class="wishimage" id="image_result" ng-src="{{image.imageURL}}" alt=""/>
                                        {{image.imageURL}}<br/>
                                        <button type="button" class="am-btn am-btn-default"
                                                ng-click="clearImage(index)">
                                            <span class="am-icon-trash-o"></span> 删除
                                        </button>
                                        <input type="file"
                                               onchange="angular.element(this).scope().selectFile(this)">
                                        <!--unfortunately as of this writing, angular does not support onchange for file uploads -->
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div ng-if="!(wishModel.images) || wishModel.images.length < 3">
                                <br/>
                                新图片<input type="file"
                                          onchange="angular.element(this).scope().selectFile(this)">
                            </div>
                        </div>

                        <div class="button-area border-top">
                            <button type="submit" class="am-btn am-btn-success right-margin top-margin">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    $('.calDate').datetimepicker().on('changeDate', function () {
        $('.calDate').datetimepicker({
            format: 'yyyy-mm-dd hh:ii'
        });
    });

    $(function () {
        $("[data-toggle='popover']").popover();
    });
</script>